<template>
  <view class="container">
    <view class="top-tips" v-if="carInfo.cancel == 1">报价中</view>
    <view class="top-tips" v-if="carInfo.cancel == -1">寻车已取消</view>
    <view class="card-box" style="margin-top: 0">
      <text class="custom-title">寻车信息</text>
      <view class="car-name">{{ carInfo.cars_name }}</view>
      <view class="zdj">
        <text>指导价：{{ carInfo.guide_price }}</text>
        <text>{{ carInfo.time }}</text>
      </view>
      <view class="aj-item zdj">
        <text>外观内饰</text>
        <text>{{ carInfo.appearance_interior }}</text>
      </view>
      <view class="aj-item zdj" style="margin-bottom: 49rpx">
        <text>上牌地区</text>
        <text>{{ carInfo.location_name }}</text>
      </view>
      <text class="custom-title">备注信息</text>
      <view class="tag-list">
        <view
          class="tag-item"
          v-for="(item, index) in carInfo.notes"
          :key="index"
          >{{ item }}</view
        >
      </view>
      <view class="describe" v-if="carInfo.describe">{{
        carInfo.describe
      }}</view>
    </view>
    <view class="card-box" v-if="quotationList.length > 0">
      <view class="asdasdad">
        <text class="custom-title" v-if="carInfo.cancel == 1">报价列表</text>
        <text class="custom-title" v-if="carInfo.cancel == -1">报价记录</text>
        <view @click="viewMore" v-if="carInfo.cancel == -1">
          <text class="view-more">查看更多</text>
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </view>
      </view>
      <view class="quotation-list">
        <view
          class="quotation-item"
          v-for="(item, index) in quotationList"
          :key="index"
        >
          <view class="baojia">
            <text class="price">报价: {{ item.price }}万</text>
            <text class="guide-price"
              >指导价：{{ item.guide_price }}万丨{{ item.quotation_name }}</text
            >
          </view>
          <view class="deposit">订金{{ item.deposit_price }}元</view>
          <view class="tag-list">
            <view
              class="tag-item"
              v-for="(item, index) in item.label_name"
              :key="index"
              >{{ item }}</view
            >
          </view>
          <view class="user">
            <image class="user-image" :src="item.imageurl" />
            <view>
              <view class="user-name">
                <view>{{ item.users_name }}</view>
                <image :src="item.users_icon" mode="heightFix" />
              </view>
              <view class="timename">注册时长：{{ item.timename }}</view>
            </view>
          </view>
          <view class="quotation-btn">
            <view @click="fankui(item)">反馈</view>
            <view @click="makePhoneCall(item)">电话联系</view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-btn" v-if="carInfo.cancel == 1">
      <view class="custom-btn" @click="cancelSearchCar">取消寻车</view>
    </view>
    <view class="bottom-btn" v-if="carInfo.cancel == -1">
      <view class="custom-btn" @click="deleteSearchCar">删除</view>
    </view>
    <!-- 反馈 -->
    <uni-popup ref="complaintPop" type="bottom">
      <view class="complaint">
        <view class="title">反馈</view>
        <view class="list">
          <view
            @click="tagClick(item)"
            class="item"
            :class="{ active: currentTag.id === item.id }"
            v-for="(item, index) in tagList"
            :key="index"
            >{{ item.name }}</view
          >
        </view>
        <textarea
		:adjust-position="false"
		@blur="keyboardHeight = 0"
		:cursorSpacing="20"
          v-model="otherTag"
          v-if="currentTag.id === 'other'"
          placeholder="请输入更多反馈内容"
        ></textarea>
        <view class="btn" @click="tijiaofankui">提交</view>
      </view>
	      <view :style="{ height: keyboardHeight + 'px' }"></view>
    </uni-popup>
    <!-- 取消寻车 -->
    <uni-popup ref="cancelSearchPop" type="bottom">
      <view class="complaint">
        <view class="title">取消寻车的原因</view>
        <view class="reason-list">
          <view
            @click="reasonClick(item)"
            class="item"
            :class="{ active: currentReason.id === item.id }"
            v-for="(item, index) in reasonList"
            :key="index"
            >{{ item.name }}</view
          >
        </view>
        <textarea
		:adjust-position="false"
		@blur="keyboardHeight = 0"
		:cursorSpacing="20"
          v-show="currentReason.id === 'other'"
          v-model="cancelReason"
          placeholder="请输入取消原因"
        ></textarea>
        <view class="btn" @click="tijiao">提交</view>
      </view>
	    <view :style="{ height: keyboardHeight + 'px' }"></view>
    </uni-popup>
  </view>
</template>

<script>
import {
  newsCarsSearchMyReleaseDetails,
  newsCarsSearchSupplierQuotationList,
  usedSearchSearchFeedback,
  newsCarsSearchMyReleaseCancel,
  usedSearchQuotation,
  newsCarsSearchMyReleaseDelete,
  usedCarSearchQuotationFeedbackAdd
} from "@/api/newCarSerach.js";
export default {
  data() {
    return {
		 keyboardHeight: 0,
      users_id: uni.getStorageSync("login").id,
      carId: "",
      carInfo: {},
      quotationList: [],
      // 反馈
      tagList: [],
      currentTag: {},
      otherTag: "",
      to_users_id: "", //供应商用户id
      // 取消寻车
      reasonList: [],
      cancelReason: "",
      currentReason: {},
    };
  },
  onLoad(option) {
    this.carId = option.carId;
    this.init();
  },
  onShow() {
    uni.onKeyboardHeightChange((res) => {
      this.keyboardHeight = res.height;
    });
  },
  methods: {
    init() {
      newsCarsSearchMyReleaseDetails(this.users_id, this.carId).then((res) => {
        this.carInfo = res.data;
      });
      newsCarsSearchSupplierQuotationList(this.carId).then((res) => {
        this.quotationList = res.data;
      });
      usedSearchSearchFeedback(1).then((res) => {
        this.tagList = res.data || [];
        this.tagList.push({
          name: "其他",
          id: "other",
        });
      });
    },
    viewMore() {
      uni.navigateTo({
        url: `/pages/home/newCarSearch/myCarSearch/quotationRecord?carId=${this.carId}`,
      });
    },
    // 反馈
    fankui(item) {
      this.to_users_id = item.id;
      this.$refs.complaintPop.open();
    },
    tagClick(item) {
      this.currentTag = item;
    },
    tijiaofankui() {
      if (this.currentTag.id) {
        if (this.currentTag.id === "other" && this.otherTag === "") {
          uni.showToast({
            title: "请输入反馈内容",
            icon: "none",
          });
          return;
        }
        usedCarSearchQuotationFeedbackAdd({
          state: "1",
          quotation_id: this.carId,
          users_id: this.users_id,
          to_users_id: this.to_users_id,
          content:
            this.currentTag.id === "other"
              ? this.otherTag
              : this.currentTag.name,
        }).then((res) => {
          if (res.code == 0) {
            uni.showToast({
              title: "反馈成功",
              icon: "none",
            });
          }
          // this.init();
          this.$refs.complaintPop.close();
          this.currentTag = {};
          this.otherTag = "";
        });
      } else {
        uni.showToast({
          title: "请选择反馈",
          icon: "none",
        });
      }
    },
    // 取消寻车
    reasonClick(item) {
      this.currentReason = item;
    },
    tijiao() {
      if (this.currentReason.id) {
        if (this.currentReason.id === "other" && this.cancelReason === "") {
          uni.showToast({
            title: "请输入取消理由",
            icon: "none",
          });
          return;
        }
        newsCarsSearchMyReleaseCancel({
          id: this.carId,
          users_id: this.users_id,
          cancel_reason:
            this.currentReason.id === "other"
              ? this.cancelReason
              : this.currentReason.name,
        }).then((res) => {
          this.init();
          this.$refs.cancelSearchPop.close();
          this.currentReason = {};
          this.cancelReason = "";
        });
      } else {
        uni.showToast({
          title: "请选择取消理由",
          icon: "none",
        });
      }
    },

    cancelSearchCar() {
      usedSearchQuotation(1).then((res) => {
        this.reasonList = res.data;
        this.reasonList.push({
          name: "其他原因",
          id: "other",
        });
      });
      this.$refs.cancelSearchPop.open();
    },
    // 删除寻车
    deleteSearchCar() {
      const that = this;
      uni.showModal({
        title: "温馨提示",
        content: "您确认删除此条寻车吗？",
        confirmText: "确定",
        confirmColor: "#0E59EA",
        cancelText: "取消",
        cancelColor: "#333333",
        success: function (res) {
          if (res.confirm) {
            newsCarsSearchMyReleaseDelete({
              id: that.carId,
              users_id: that.users_id,
            }).then((res) => {
              var pages = getCurrentPages();
              var prevPage = pages[pages.length - 2];
              prevPage.$vm.backData();
              uni.navigateBack({
                delta: 1,
              });
            });
          }
        },
      });
    },
    // 电话联系
    makePhoneCall(item) {
      wx.makePhoneCall({
        phoneNumber: item.phone,
        success: function () {
          // callHistory({
          //   vehicle_source: 3,
          //   vehicle_source_id: "",
          //   shop_users_id: "",
          //   users_id: "",
          //   phone: "",
          // });
        },
        fail: function () {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-title {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #05052a;
  line-height: 18rpx;
  background-image: url(/static/bac-small.png);
  background-size: 90rpx 33rpx;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.top-tips {
  text-align: center;
  height: 60rpx;
  line-height: 60rpx;
  background: #e6efff;
  font-size: 24rpx;
  color: #2d56c5;
}
.container {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  padding-bottom: 180rpx;
  .card-box {
    padding: 28rpx 30rpx;
    margin-top: 20rpx;
    background-color: #fff;
  }
  .car-name {
    font-weight: 800;
    margin: 25rpx 0;
  }
  .zdj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
  }
  .aj-item {
    color: #999;
    margin-top: 25rpx;
  }
  .tag-list {
    .tag-item {
      margin-top: 29rpx;
      display: inline-block;
      margin-right: 20rpx;
      height: 54rpx;
      line-height: 54rpx;
      padding: 0 36rpx;
      background: #f7f7f7;
      border-radius: 27rpx;
    }
  }
  .describe {
    margin-top: 20rpx;
    font-size: 24rpx;
  }
  .asdasdad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    view {
      display: flex;
      align-items: center;
    }
    .view-more {
      color: #0e59ea;
      font-size: 24rpx;
      margin-right: 10rpx;
    }
  }
  // 报价列表
  .quotation-list {
    .quotation-item {
      border-bottom: 1rpx solid #f2f2f2;
      &:last-child {
        border-bottom: none;
      }
      .baojia {
        margin-top: 25rpx;
        .price {
          font-size: 40rpx;
          font-weight: 800;
          color: #ec4b4b;
        }
        .guide-price {
          margin-left: 24rpx;
          font-size: 24rpx;
          color: #333333;
        }
      }
      .deposit {
        margin-top: 28rpx;
        font-size: 24rpx;
        color: #333333;
      }
      .user {
        margin-top: 40rpx;
        display: flex;
        align-items: center;
        color: #333;
        .user-image {
          width: 62rpx;
          height: 62rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }
        .user-name {
          display: flex;
          align-items: center;
          image {
            height: 20rpx;
            margin: 0 15rpx;
          }
        }
        .timename {
          margin-top: 10rpx;
          font-size: 24rpx;
        }
      }
      .quotation-btn {
        margin: 15rpx 0 5rpx;
        gap: 20rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        view {
          padding: 0 50rpx;
          text-align: center;
          box-sizing: border-box;
          height: 50rpx;
          line-height: 50rpx;
          border: 1px solid #999999;
          border-radius: 25rpx;
        }
      }
    }
  }
}
// 反馈
.complaint {
  background-color: #fff;
  width: 100%;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 40rpx 28rpx 30rpx;
  .title {
    text-align: center;
    font-size: 32rpx;
    font-weight: 800;
  }
  .wfaa {
    margin-top: 40rpx;
  }
  .list {
    display: flex;
    align-items: center;
    gap: 33rpx;
    view {
      margin-top: 29rpx;
      width: 25%;
      box-sizing: border-box;
      font-size: 24rpx;
      text-align: center;
      height: 50rpx;
      line-height: 46rpx;
      border: 1px solid #999999;
      border-radius: 25rpx;
      &.active {
        color: #fff;
        background-color: #0e59ea;
        border-color: #0e59ea;
      }
    }
  }
  textarea {
    width: 100%;
    margin: 40rpx 0 0;
    height: 150rpx;
    background: #f3f3f3;
    border-radius: 14rpx;
    padding: 15rpx 20rpx;
  }
  .btn {
    margin-top: 50rpx;
    flex: 1;
    width: 100%;
    color: #fff;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    background: #0e59ea;
    border-radius: 14rpx;
    font-size: 28rpx;
  }
}
.reason-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18rpx;
  margin-top: 20rpx;
  .item {
    margin-top: 10rpx;
    width: calc(50% - 10rpx);
    height: 54rpx;
    line-height: 54rpx;
    background: #ffffff;
    border: 1rpx solid #cacbcc;
    border-radius: 27rpx;
    text-align: center;
    &.active {
      color: #2d56c5;
      border-color: #2d56c5;
    }
  }
}
.bottom-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  height: 162rpx;
  padding: 0 28rpx;
  box-shadow: 0rpx -6rpx 4rpx 0rpx rgba(204, 204, 204, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  .custom-btn {
    flex: 1;
    width: 100%;
    color: #333;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 14rpx;
    font-size: 28rpx;
    border: 1rpx solid #999;
  }
}
</style>
